<template>
  <div class="flex-row justify-between component-q3q5cK4a">
    <div class="flex-row items-end self-center space-x-8">
      <div class="flex-col items-center group_3 space-y-12">
        <img
          class="image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png"
        />
        <img
          class="image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png"
        />
        <img
          class="image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png"
        />
      </div>
      <div class="flex-col space-y-22">
        <div class="flex-col items-start">
          <span class="font_7">微信读书</span>
          <span class="font_8">85%的人使用</span>
        </div>
        <div class="flex-col items-start">
          <span class="font_7">个人邮箱</span>
          <span class="font_8">9%的人使用</span>
        </div>
        <div class="flex-col items-start">
          <span class="font_7">百度网盘</span>
          <span class="font_8">6%的人使用</span>
        </div>
      </div>
    </div>
    <div class="flex-col self-start group_4 space-y-32">
      <div class="flex-row items-center section_9">
        <img
          class="shrink-0 image_3"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926104431128810.png"
        />
        <span class="font_4 text_8">发到书架</span>
      </div>
      <div class="flex-row items-center section_9">
        <img
          class="shrink-0 image_3"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926111887759896.png"
        />
        <span class="font_4 text_8">发到邮箱</span>
      </div>
      <div class="flex-row items-center section_9">
        <img
          class="shrink-0 image_3"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926112331070734.png"
        />
        <span class="font_4 text_8">生成链接</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },

    methods: {},
  };
</script>

<style scoped lang="css">
  .component-q3q5cK4a {
    padding: 1.38rem 1.25rem;
    background-color: #ffffff;
    box-shadow: -0.31rem 0.31rem 0.63rem -0.31rem #6b696980;
    border-radius: 1.88rem;
  }
  .space-x-8 > *:not(:first-child) {
    margin-left: 0.5rem;
  }
  .group_3 {
    margin-bottom: 0.25rem;
  }
  .space-y-12 > *:not(:first-child) {
    margin-top: 0.75rem;
  }
  .image_2 {
    width: 2.44rem;
    height: 2.63rem;
  }
  .space-y-22 > *:not(:first-child) {
    margin-top: 1.38rem;
  }
  .font_7 {
    font-size: 0.88rem;
    font-family: 'PingFang SC';
    line-height: 1.25rem;
    font-weight: 500;
    color: #060518e0;
  }
  .font_8 {
    font-size: 0.63rem;
    font-family: 'PingFang SC';
    line-height: 0.88rem;
    font-weight: 600;
    color: #06051899;
  }
  .group_4 {
    margin-top: 1.13rem;
  }
  .space-y-32 > *:not(:first-child) {
    margin-top: 2rem;
  }
  .section_9 {
    padding: 0.25rem 0.38rem;
    background-color: #4ad2e4;
    box-shadow: 0px 0.5rem 1.25rem 0px #4ad2e414;
    border-radius: 0.72rem;
  }
  .image_3 {
    border-radius: 50%;
    width: 1.06rem;
    height: 0.94rem;
  }
  .font_4 {
    font-size: 0.75rem;
    font-family: 'PingFang SC';
    line-height: 1.06rem;
    font-weight: 600;
    color: #fefeff;
  }
  .text_8 {
    margin: 0 0.25rem;
  }
</style>